<template>
  <div class="col center">
    <div class="col center" style="margin: 64px">
      <span style="font-size: xx-large; font-weight: 600">加入我们</span>
      <span
        style="
          font-size: medium;
          font-weight: 600;
          color: gray;
          margin-top: 16px;
        "
        >JOIN US</span
      >
    </div>
    <el-row>
      <div class="card1">
        <div>
          <div class="title">注册会员</div>
          <div class="content">
            请用电子邮箱或手机号码注册会员，如已有账号请登录
          </div>
        </div>
        <div class="btn-bar">
          <button class="btn1">个人会员（在校）</button>
          <button class="btn1">个人会员（普通）</button>
          <button class="btn1">单位会员</button>
        </div>
      </div>
      <div class="card2">
        <div>
          <div class="title">入会须知</div>
          <div class="content">
            请认真阅读会员须知并按要求提交相关资料，遵守相关规定。
          </div>
        </div>
        <div class="btn-bar">
          <button class="btn2" @click="toMemberNotice">查看会员须知</button>
        </div>
      </div>
      <div class="card3">
        <div>
          <div class="title">填表说明</div>
          <div class="content">
            为加强会员管理，凡是加入我会的个人和单位组织都应填写申请表。
            我会申请表分为个人申请表（附件1 ）和单位会员申请表（附件2
            ）单位会员需同时提交单位会员申请和个人会员申请表；单位会员所填申请表需单位盖章，个人申请表需本人签字；在职的个人会员所填申请表需本人签字及单位盖章，非在职的个人会员所填申请表需本人签字。
            填写完成后请申请表发送至邮箱（zjh202303@qq.com）
          </div>
        </div>
        <div class="btn-bar">
          <button class="btn3" @click="toDownload">下载申请表</button>
        </div>
      </div>
    </el-row>
    <div class="col center" style="margin: 64px">
      <span style="font-size: xx-large; font-weight: 600">会员活动</span>
      <span
        style="
          font-size: medium;
          font-weight: 600;
          color: gray;
          margin-top: 16px;
        "
        >MEMBER ACTIVITIES</span
      >
    </div>
    <el-carousel style="width: 60%; min-width: 600px; margin: 24px" type="card">
      <el-carousel-item
        v-for="item in 4"
        :key="item"
        style="display: flex; flex-direction: column; align-items: center"
      >
        <h3 text="2xl" style="text-align: center">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

    <articles type="会员活动" />
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { useRouter } from 'vue-router'
import articles from './articles.vue'
const router = useRouter()
const toMemberNotice = () => {
  axios
    .get('/api/getEssayByType', {
      headers: {
        Authorization: `Bearer ${window.localStorage.getItem('token')}`,
      },
      params: {
        type: '会员须知',
      },
    })
    .then((res) => {
      let id = res.data.data[0].id
      router.push({
        name: 'article',
        query: {
          articleId: id,
        },
      })
    })
}
const toDownload = () => {
  axios
    .get('/api/getEssayByType', {
      headers: {
        Authorization: `Bearer ${window.localStorage.getItem('token')}`,
      },
      params: {
        type: '下载申请表',
      },
    })
    .then((res) => {
      let id = res.data.data[0].id
      router.push({
        name: 'article',
        query: {
          articleId: id,
        },
      })
    })
}
</script>

<style scoped>
.title {
  font-size: x-large;
}
.content {
  margin: 24px 0 24px 0;
}
.btn-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card1 {
  background-color: darksalmon;
  width: 300px;
  height: 480px;
  padding: 24px;
  margin: 24px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  color: white;
  transition: all 0.5s;
}
.card1:hover {
  background-color: rgb(28, 16, 33);
  box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.7);
  transform: translate(0, -3px);
}
.btn1 {
  background: white;
  border: none;
  color: darksalmon;
  width: 160px;
  height: 36px;
  margin: 12px;
}
.btn1:hover {
  color: white;
  background: darksalmon;
  transition: background-color 500ms 0ms ease;
}

.card2 {
  background-color: dimgrey;
  width: 300px;
  height: 480px;
  padding: 24px;
  margin: 24px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  color: white;
  transition: all 0.5s;
}
.card2:hover {
  background-color: rgb(28, 16, 33);
  box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.7);
  transform: translate(0, -3px);
}
.btn2 {
  background: white;
  border: none;
  color: dimgrey;
  width: 160px;
  height: 36px;
  margin: 12px;
}
.btn2:hover {
  color: white;
  background: dimgrey;
  transition: background-color 500ms 0ms ease;
}

.card3 {
  background-color: lightslategray;
  width: 300px;
  height: 480px;
  padding: 24px;
  margin: 24px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  color: white;
  transition: all 0.5s;
}
.card3:hover {
  background-color: rgb(28, 16, 33);
  box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.7);
  transform: translate(0, -3px);
}
.btn3 {
  background: white;
  border: none;
  color: lightslategray;
  width: 160px;
  height: 36px;
  margin: 12px;
}
.btn3:hover {
  color: white;
  background: lightslategray;
  transition: background-color 500ms 0ms ease;
}
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
